<template>
  <div
    :class="['form-item-container', `${columnNum == 2 ? 'two-columns' : ''}`]"
    >
    <paas-base-search-item
      v-for="(field, idx) in filterFields"
      :key="`${field}_${idx}`"
      :field="field"
      :form="form"
      @update="updateForm"
    >
    </paas-base-search-item>
  </div>
</template>

<script>
import PaasBaseSearchItem from './PaaSAdvPanel/BaseSearchItem'
import _ from 'lodash';
import { initVal, convertAdvanceSearchFields, packToAdvancedSearchParams } from './PaaSAdvPanel/util.js';
export default {
  name: 'custom-app-search-form',
  components: {
    PaasBaseSearchItem,
  },
  props: {
    columnNum: {
      type: Number, // 一栏二栏
      default: 1,
    },
    fields: {
      type: Array, // 搜索数据
      default: () => {[]}
    },
    taskFrom: {
      type: Object | String
    }, // 初始值
  },
  computed: {
    queryParams() {
      return {};
    },
    filterFields() {
      return convertAdvanceSearchFields(this.fields, {});
    }
  },
  data() {
    return {
      form: {}
    }
  },
  mounted() {
    this.initFormVal();
  },
  methods: {
    /** 初始化form控件值 */
    initFormVal() {
      this.filterFields.forEach(field => {
        let initValue = this.queryParams[field.fieldName];
        this.$set(this.form, field.fieldName, initValue || initVal(field));
      });
    },
    /**
     * 构建搜索参数 (暴露)
     */
    buildParams() {
      return packToAdvancedSearchParams(this.filterFields, _.cloneDeep(this.form));
    },
    /** 更新form */
    updateForm({ key, value }) {
      this.$set(this.form, key, value);
    }
  }
}
</script>

<style lang="scss" scoped>
.two-columns {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  .form-item {
    width: 390px;
  }
}
</style>